<template>
  <div class="box">
    <div class="gailan">
      <el-card class="box-card">
        <template #header>
          <div class="clearfix">
            <span>设备概览</span>
          </div>
        </template>
        <div class="text item gailan_item">
          <div class="img-box">
            <img src="@/assets/images/gateway.png" alt="">
          </div>
          <div class="wangguan">
            <div class="num">
              {{ deviceObj.LoRaWAN.total }}
            </div>
            <div>LoRaWAN</div>
            <div>网关</div>
          </div>
          <div class="wangguan">
            <div class="num">{{ deviceObj.LoRaPP.total }}</div>
            <div>LoRaPP</div>
            <div>网关</div>
          </div>
          <div class="wangguan">
            <div class="num">{{ deviceObj.group }}</div>
            <div>群组</div>
          </div>
          <div class="img-box">
            <img class="small_img" src="@/assets/images/devNode2.png" alt="">
          </div>
          <div class="wangguan">
            <div class="num">{{ deviceObj.sensor.total }}</div>
            <div>传感器节点</div>
          </div>
        </div>
      </el-card>

    </div>
    <div class="jiankong">
      <el-card class="box-card">
        <template #header>
          <div class="clearfix">
            <span>监控</span>
          </div>
        </template>

        <div class="text item con">
          <div>
            网关离线<span>6</span>
          </div>
          <div>
            节点离线<span>15</span>
          </div>
          <div>
            传感器低电压<span class="red">14</span>
          </div>
        </div>

      </el-card>
    </div>
  </div>
</template>

<script lang="ts">
import { $deviceCount } from "@/api/index";
import { defineComponent, onMounted, reactive, toRefs } from "vue";
export default defineComponent({
  name: 'WorkspaceJsonGaiLan',
  setup() {
    const Data:any = reactive({
      deviceObj: {
        LoRaWAN: '',
        LoRaPP: '',
        group: '',
        sensor: ''
      }
    })
    onMounted(() => {
      $deviceCount().then((res) => {
        Data.deviceObj = res.data.data;
      })
    })
    return { ...toRefs(Data) }
  }

  // data() {
  //   return {
  //     deviceObj: {
  //       LoRaWAN: '',
  //       LoRaPP: '',
  //       group: '',
  //       sensor: ''
  //     }
  //   };
  // },

  // mounted() {
  //   $deviceCount().then((res) => {
  //     this.deviceObj = res.data.data;
  //   })
  // }
});
</script>

<style lang="less" scoped>
.box {
  display: flex;
}

.gailan {
  width: 70%;

  .gailan_item {
    display: flex;
    align-items: center;

    .wangguan {
      flex: 1;
      text-align: center;
      position: relative;

      .num {
        font-size: 26px;
        font-weight: bold;
      }
    }

    .wangguan:nth-of-type(-n+4):after {
      content: '';
      display: block;
      width: 1px;
      height: 70px;
      background-color: #ccc;
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
    }

    .img-box {
      width: 71px;
      height: 132px;
      display: flex;
      justify-content: center;
      align-items: center;

      .small_img {
        width: 20%;
        height: auto;
      }

      img {
        width: 70%;
        height: 70%;
      }
    }
  }
}

.jiankong {
  width: 30%;
  margin: 0 10px;

  .con {
    height: 132px;

    div {
      display: flex;
      // margin: 5px 0;
      justify-content: space-between;
      font-weight: bold;

      span {
        display: block;
        width: 40px;
        padding: 3px 0;
        font-size: 12px;
        color: green;
        height: 14px;
        text-align: center;
        line-height: 14px;
        background: lightgreen;
        border-radius: 14px;
      }

      .red {
        color: red;
        background-color: lightcoral;
      }
    }
  }
}
</style>